<template>
  <div>
    <!-- 头部区域开始 -->
    <div class="header">
      <el-header>
        <div class="logo">
          <i class="iconfont icon-yinyue"></i>
          <p>网易云音乐</p>
        </div>
        <div class="others">
          <i class="iconfont icon-xiaoyu anjian" @click="back"></i>
          <i class="iconfont icon-dayuhao anjian" @click="forward"></i>
          <my-search></my-search>
          <i class="iconfont icon-maikefeng"></i>
        </div>
        <div class="login">
          <div
            class="weidenglu"
            v-if="userInfo.avatarUrl ? false : true"
            @click="login"
          >
            <i class="iconfont icon-denglu"></i>
            <p>未登录</p>
          </div>
          <div class="yidenglu" v-else>
            <div class="img">
              <img :src="userInfo.avatarUrl" alt="" />
            </div>
            <p>{{ userInfo.nickname }}</p>
            <el-button type="danger" class="logout" @click="logout"
              >退出</el-button
            >
          </div>
        </div>
      </el-header>

      <!-- 登录框开始 -->
      <el-form
        label-width="80px"
        class="ruleForm"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        v-show="formShow"
      >
        <el-form-item label="手机号码" prop="phoneNumber">
          <el-input v-model="ruleForm.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input v-model="ruleForm.passWord" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">登录</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
        <div class="close" @click="close">关闭</div>
      </el-form>
      <!-- 登录框结束 -->
    </div>
    <!-- 头部区域结束 -->
    <div style="display: flex">
      <!-- 侧边栏区域开始 -->
      <div style="width: 200px; height: 800px">
        <el-aside>
          <ul>
            <router-link
              tag="li"
              v-for="item in asideData"
              :key="item.id"
              @click.native="btnAside(item.name)"
              :class="activeAside == item.name ? 'selected' : ''"
              :to="item.to"
              >{{ item.name }}</router-link
            >
          </ul>
          <div @click="getMySongList">我的歌单</div>
        </el-aside>
      </div>
      <!-- 侧边栏区域结束 -->
      <!-- <el-main style="overflow-y: hidden"> -->
      <el-main>
        <router-view
          ref="playSong"
          @getSong="addSongList"
          @allPlay="allPlay"
          :key="$route.fullPath"
        ></router-view>
      </el-main>
    </div>
    <div style="height: 90px">
      <div>
        <!-- 底部开始 -->
        <el-footer>
          <div class="left">
            <div v-if="songList.length" class="leftBox">
              <div class="img">
                <img :src="songList[NowPlaySongId].al.picUrl" alt="" />
              </div>
              <div class="text">
                <p class="songTitle">{{ songList[NowPlaySongId].name }}</p>
                <p class="songUser">{{ songList[NowPlaySongId].ar[0].name }}</p>
              </div>
              <i class="iconfont icon-02" @click="like"></i>
            </div>
          </div>
          <div class="center">
            <div class="function">
              <i class="iconfont icon-hanhan-01" @click="pre"></i>
              <i
                class="iconfont icon-iconset0481"
                @click="play"
                v-show="play1 == false ? true : false"
              ></i>
              <i
                class="iconfont icon-bofang"
                @click="play"
                v-show="play1 == true ? true : false"
              ></i>
              <i class="iconfont icon-hanhan-011" @click="next"></i>

              <i></i>
            </div>
            <div style="width: 370px; margin: 0 auto">
              <el-progress
                :percentage="percentage"
                color="#ff4e4e"
                ref="progressBar"
                @click.native="changeBar"
                :text-inside="true"
              ></el-progress>
            </div>
          </div>
          <div class="right">
            <div class="voice">
              <i class="iconfont icon-laba"></i>
              <div class="voiceBarBox">
                <!-- <div class="voiceBar" :style="VoiceBar"></div> -->

                <el-slider
                  v-model="VoiceBar"
                  :show-tooltip="false"
                  @input="changeVoice"
                ></el-slider>
              </div>
            </div>
            <div class="songListClass" @click="songListShow = !songListShow">
              <i class="iconfont icon-list-v2"></i>
            </div>
            <div></div>
          </div>
          <!-- 隐藏的播放器开始 -->
          <audio
            :src="audioSrc"
            autoplay
            @canplay="getDuration"
            @timeupdate="updateTime"
            @ended="end"
            ref="audio"
          ></audio>

          <div class="songList" v-if="songListShow">
            <div class="head">
              <h3>当前播放</h3>
              <div class="text">
                <p>总{{ songList.length }}首</p>
                <p @click="clearSongList">清空列表</p>
              </div>
            </div>
            <div class="body">
              <el-table
                :data="songList"
                stripe
                style="width: 100%; font-size: 13px; color: #343434"
                :row-style="{ height: '32px' }"
                :cell-style="{ padding: '5px' }"
                @cell-dblclick="dblclick"
                :row-class-name="tableRowClassName"
              >
                <el-table-column prop="name" width="180"> </el-table-column>
                <el-table-column prop="ar[0].name"> </el-table-column>
                <el-table-column prop="dt">
                  <template scope="scope">
                    {{ scope.row.dt | timeFilter }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-footer>
      </div>
    </div>
  </div>
</template>

<script>
import search from "./components/mySearch.vue";
export default {
  data() {
    return {
      msg: "123",
      asideData: [{ id: 1, name: "发现音乐", to: "/findMusic" }],
      activeAside: "",
      currentTime: 0, //歌曲的当期时间
      duration: 0, //歌曲的总时间
      play1: false, //播放或者停止
      percentage: 0, //歌曲显示百分比,
      audioSrc: "", //歌曲的Url
      songList: [], //存储歌曲列表
      songListShow: false, //是否展示歌曲列表
      VoiceBar: 100, //音乐声音大小
      NowPlaySongId: 0, //正在播放的歌曲id
      formShow: false,
      userInfo: {
        avatarUrl: "",
        nickname: "",
        userId: "",
      },
      ruleForm: {
        //表单中的数据
        phoneNumber: "",
        passWord: "",
      },
      mysonglistid: "",

      //表单验证规则
      rules: {
        phoneNumber: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 11, max: 11, message: "请输入11位电话号码", trigger: "blur" },
        ],
        passWord: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 20, message: "请输入3-20位的密码", trigger: "blur" },
        ],
      },
    };
  },
  components: {
    "my-search": search,
  },

  methods: {
    btnAside(activename) {
      this.activeAside = activename;
    },
    //添加到歌曲列表中
    addSongList(data) {
      this.play1 = true;
      //歌曲去重
      // if (this.songList.includes(data)) {
      //   console.log("重复了");
      //   return;
      // }
      var include = false;
      this.songList.forEach((item) => {
        if (item.id == data.id) {
          include = true;
        }
      });
      if (include) return;
      this.songList.unshift(data);
      this.NowPlaySongId = 0;
      this.getsong();
    },
    //获取歌曲的url
    // getSonUrl(data) {
    //   this.audioSrc = data.url;
    // },
    //获取播放音乐播放了多少时间
    updateTime(e) {
      if (e.target.currentTime != 0) {
        this.currentTime = e.target.currentTime;
        this.percentage = (this.currentTime / this.duration) * 100;
      }
    },
    //此时可以获取到该歌曲的播放总时间
    getDuration() {
      this.duration = this.$refs.audio.duration;
    },

    //歌曲播放完毕后执行
    async end() {
      this.NowPlaySongId += 1;

      //获取到下一首歌曲的id 并播放
      if (this.NowPlaySongId == this.songList.length) {
        return;
      }
      this.getsong();
    },

    //通过id获取歌曲
    async getsong() {
      var id = this.songList[this.NowPlaySongId].id;

      //如果不是最后一首歌

      //发送请求获取到歌曲
      const data5 = await this.$http(`/song/url?id=${id}`);

      this.audioSrc = data5.data.data[0].url;
    },
    //点击播放按钮
    play() {
      this.play1 = !this.play1;
      if (this.play1 == true) {
        this.$refs.audio.play();
      } else {
        this.$refs.audio.pause();
      }
      console.log(this.songList[this.NowPlaySongId]);
    },

    //切换播放进度
    changeBar(e) {
      var percentage = (e.offsetX / 370) * 100;
      this.percentage = percentage;
      this.$refs.audio.currentTime = (e.offsetX / 370) * this.duration;
    },
    //双击歌曲列表中的歌曲播放
    async dblclick(row) {
      this.play1 = true;
      var id = row.id;
      //发送请求获取歌曲
      const data4 = await this.$http(`/song/url?id=${id}`);
      this.audioSrc = data4.data.data[0].url;
      this.NowPlaySongId = row.index;
    },
    //音量改变
    changeVoice() {
      //this.VoiceBar = "width:" + e.offsetX + "px";

      this.$refs.audio.volume = this.VoiceBar / 100;
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },

    //点击清空列表
    clearSongList() {
      this.songList = [];
    },
    //点击播放上一首歌
    pre() {
      if (this.NowPlaySongId == 0) return;
      this.NowPlaySongId -= 1;
      this.getsong();
    },

    //点击播放下一首歌
    next() {
      if (this.NowPlaySongId == this.songList.length - 1) return;
      this.NowPlaySongId += 1;
      this.getsong();
    },
    //向前路由
    forward() {
      history.forward();
    },
    //向后路由
    back() {
      history.back();
    },
    //重置表单
    reset() {
      this.$refs.ruleForm.resetFields();
    },
    //提交表单
    submitForm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          //向后端发送请求登录
          const data6 = await this.$http(
            `/login/cellphone?phone=${this.ruleForm.phoneNumber}&password=${this.ruleForm.passWord}`
          );

          //登录成功
          if (data6.data.code == 200) {
            this.$message({
              showClose: true,
              message: "登录成功",
              type: "success",
            });

            //获取到的token值存储到sessionStorage中

            //获取到的cookie值存储到vuex的全局变量中
            this.$store.commit("getCookie", data6.data.cookie);

            // window.sessionStorage.setItem("Cookies", data6.data.cookie);
            //把userid，url和Nickname赋值到userinfo变量中

            this.userInfo.avatarUrl = data6.data.profile.avatarUrl;
            this.userInfo.nickname = data6.data.profile.nickname;
            this.userInfo.userId = data6.data.profile.userId;

            var data = await this.$http({
              url: `user/playlist?uid=${this.userInfo.userId}`,
              method: "post",
              data: {
                cookie: this.$store.state.cookie,
              },
            });

            this.mysonglistid = data.data.playlist[0].id;

            this.formShow = false;
          } else {
            this.$message({
              showClose: true,
              message: "手机号码或者密码错误",
              type: "error",
            });
          }
        } else {
          return;
        }
      });
    },

    //点击登录
    login() {
      this.formShow = true;
    },
    //退出
    async logout() {
      const data7 = await this.$http("/logout");

      //清除本地的cookies
      this.$store.commit("clearCookie");
      this.userInfo = {};
      this.$message({
        showClose: true,
        message: "退出成功",
        type: "success",
      });
    },
    close() {
      this.formShow = false;
    },
    async getMySongList() {
      //获取我的歌单列表
      //
      var id = this.mysonglistid;

      this.$router.push(`/songList/${id}`);
    },
    //点击喜欢
    async like() {
      if (this.$store.state.cookie == "") {
        this.$message({
          showClose: true,
          message: "请先登录",
          type: "error",
        });
        return;
      }
      var id = this.songList[this.NowPlaySongId].id; //获取喜欢歌曲的id
      var res = await this.$http({
        url: "/like",
        method: "post",
        data: {
          id: id,
          cookie: this.$store.state.cookie,
        },
      });
      this.$message({
        showClose: true,
        message: "添加成功",
        type: "success",
      });
    },
    //点击播放全部、、
    allPlay(data) {
      this.songList = data;
      this.getsong();
      this.play1 = true;
    },
  },
};
</script>
<style lang="less" scoped>
// 头部区域开始
.header {
  height: 60px;
  width: 60px;
  .ruleForm {
    position: fixed;
    width: 430px;
    height: 250px;
    border: 2px solid #d6d6d6;
    border-radius: 5px;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 50px 50px 50px 30px;
    z-index: 9999;
    .close {
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer;
    }
  }
}
.el-header {
  position: fixed;
  display: flex;
  width: 100%;

  background-color: #ec4141;
  z-index: 9;
  .logo {
    flex: 1;
    display: flex;
    color: #fff;
    line-height: 60px;

    .icon-yinyue {
      margin-right: 10px;
    }
  }
  .others {
    flex: 5;
    display: flex;
    color: #fff;
    margin-top: 16px;
    .anjian {
      width: 28px;
      height: 28px;
      background-color: #e13e3e;
      border-radius: 50%;
      padding: 6px;
      margin-right: 10px;
      font-size: 12px;
      color: #f6cdcd;
      // &::before {
      // }
    }

    .icon-maikefeng {
      width: 28px;
      height: 28px;
      background-color: #e13e3e;
      border-radius: 50%;
      padding: 5px 6px;
      color: #f6cdcd;
    }
  }
  .login {
    flex: 2;
    display: flex;

    color: #fff;
    .icon-denglu {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background-color: #e0e0e0;
      padding: 6px;
      margin-right: 5px;
    }
    .yidenglu,
    .weidenglu {
      display: flex;
      align-items: center;
      .logout {
        margin-left: 20px;
      }
    }

    .img {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background-color: #e0e0e0;
      padding: 6px;
      margin-right: 5px;
      img {
        width: 100%;
      }
    }
    p {
      font-size: 14px;
    }
  }
}
//头部区域结束

//侧边栏开始
.el-aside {
  position: fixed;
  width: 200px !important;
  height: 800px;
  background-color: #fff;
  border-right: 1px solid #e1e1e1;
  //margin-top: 60px;
  ul {
    padding: 16px 2px 10px 10px;
    li {
      height: 32px;
      margin-bottom: 4px;
      line-height: 32px;
      padding-left: 5px;
      border-radius: 3px;
    }
    .selected {
      font-weight: 700;
      background-color: #f5f5f6;
      font-size: 18px;
    }
  }
}
//侧边栏结束

//内容区域开始
.el-main {
  padding: 20px 0;
  position: relative;
  //margin: 60px 0 90px 200px;
}
//内容区域结束
//底部开始
.el-footer {
  position: fixed;

  bottom: 0;
  width: 100%;
  display: flex;
  height: 74px !important;
  background-color: #fff;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
  padding: 5px 0;
  z-index: 999;
  .left {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 2;
    .leftBox {
      width: 100%;
      display: flex;
      //justify-content: center;
      padding-left: 30px;
    }

    .img {
      width: 50px;
      height: 50px;

      border-radius: 5px;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .text {
      margin-left: 10px;
    }
    .songTitle {
      font-size: 14px;
      margin-bottom: 4px;
    }
    .songUser {
      font-size: 12px;
    }
    i {
      margin-left: 12px;
    }
    .icon-02 {
      font-size: 20px;
    }
  }
  .center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 6;

    text-align: center;
    .function {
      display: flex;
      justify-content: center;
      height: 34px;
      .iconfont {
        display: flex;
        font-size: 18px;
        margin: 0 15px;
        align-items: center;
      }
      .icon-iconset0481,
      .icon-bofang {
        font-size: 30px;
      }
    }
  }
  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 2;

    .voice {
      display: flex;
      align-items: center;
      margin-right: 30px;
    }
    .voiceBarBox {
      width: 100px;
      cursor: pointer;
    }
    /deep/.el-slider__runway {
      border-radius: 2px;
      height: 3px;
      margin-left: 10px;
      background-color: #e5e5e5;
    }
    /deep/.el-slider__bar {
      width: 100px;
      height: 3px;
      background-color: #fb7373;
    }
    /deep/.el-slider__button {
      width: 12px;
      height: 12px;
      margin-top: -3px;
      background-color: #ec4141;
      border: 2px solid #ec4141;
    }
  }
  .songList {
    position: absolute;
    height: 700px;
    width: 400px;
    top: -800px;
    background-color: #fff;
    right: 0;
    padding: 10px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;

    .head {
      position: absolute;
      width: 94%;
    }
    h3 {
      margin-bottom: 10px;
    }
    p:nth-child(1) {
      color: #d5d5d5;
      font-size: 12px;
    }
    p:nth-child(2) {
      color: #507daf;
      font-size: 13px;
      cursor: pointer;
    }
    .text {
      display: flex;
      justify-content: space-between;
    }
    .body {
      margin-top: 70px;
      /deep/.el-table .cell {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      /deep/.el-table th {
        display: none;
      }
      /deep/.el-table {
        height: 600px;
        overflow: auto;
      }
      /deep/.current-row {
        background-color: red;
        color: #f19944;
      }
    }
  }
}
/deep/.el-progress-bar__innerText {
  display: none;
}
/deep/.el-progress-bar__inner {
  transition: all 0.01s ease;
}
//底部结束
</style>
